<template>
  <div>
    <el-container>
      <el-header>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="班级列表">
            <el-select v-model="formInline.grade" placeholder="请选择">
              <el-option
                v-for="item in options1"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="科目">
            <el-select v-model="formInline.subject" placeholder="请选择">
              <el-option
                v-for="item in options2"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="ondata">班级数据对比</el-button>
          </el-form-item>
        </el-form>
      </el-header>

      <el-main>
        <div id="myChart" :style="{ width: '1000px', height: '600px' }"></div>
      </el-main>

      <el-footer> </el-footer>
    </el-container>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      options1: [],
      options2: [],
      tableData: [],
      value: "",

      formInline: {
        grade: "1",
        subject: "chinese",
      },
    };
  },

  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart"));
      // 绘制图表
      myChart.setOption({
        legend: {},
        tooltip: {},
        dataset: {
          source: this.tableData,
        },
        xAxis: { type: "category" },
        yAxis: {},
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [{ type: "bar" }, { type: "bar" }],
      });
    },
    ondata() {
      axios
        .get("http://localhost:8080/selectStuData3", {
          params: {
            grades: this.formInline.grade,
            subject: this.formInline.subject,
          },
        })
        .then((resp) => {
          this.tableData = eval(resp.data.classdata);

          this.drawLine();
        });
    },

    selectdata2() {
      axios
        .get("http://localhost:8080/selectStuData", {
          params: {},
        })
        .then((resp) => {
          var tmp1 = eval(resp.data.gradeclass);
          this.options1 = tmp1;

          var tmp2 = eval(resp.data.subject);
          this.options2 = tmp2;
        });
    },
  },
  created() {
    this.selectdata2();
  },
};
</script>

<style scoped>
</style>
